<template>
  <q-page class="q-pa-md">
    <q-btn class="float-right" color="primary" icon="arrow_back" outline title="返回" to="/" />
    <div class="q-pb-md text-h5">整栈板移库</div>
    <!--错误提示-->
    <q-banner class="text-white bg-red q-mb-sm" dense inline-actions v-if="serverErrorMessage">
      {{ serverErrorMessage }}
      <template v-slot:action>
        <q-btn @click="serverErrorMessage = ''" dense flat icon="close" size="sm" />
      </template>
    </q-banner>
    <div class="row q-pt-sm q-col-gutter-sm">
      <div class="row col-12">
        <div class="col-12">
          <q-icon color="red" name="fas fa-asterisk" size="10px" />
          <span>仓库</span>
          <simple-filter-select :auto-select-single-option="true" :options="$d.whDropdownList"
            option-label="whName" option-value="whId" v-model="$d.whId" :use-filter="false"
            @update:model-value="fLpnEnter"
            :error="v$.whId.$error" :error-message="e$(v$.whId.$errors)"/>
        </div>
      </div>
      <div class="row col-12">
        <div class="col-12">
          <q-icon color="red" name="fas fa-asterisk" size="10px" />
          <span>来源栈板(箱号)</span>
          <easy-input v-model="$d.fLpn" @focus="fx.ui.select" @keyup.enter="fLpnEnter" ref="fLpn"
            :loading="getLocsLoadingState" :error="v$.fLpn.$error" :error-message="e$(v$.fLpn.$errors)" />
        </div>
      </div>
      <div class="row col-12">
        <div class="col-12">
          <q-icon color="red" name="fas fa-asterisk" size="10px" />
          <span>来源储位</span>
          <simple-filter-select :options="$d.locDropdownList" dense
            no-error-icon v-model="$d.fLoc" option-label="loc" option-value="loc"
            :auto-select-single-option="true" :use-filter="false" ref="fLoc"
            :error="v$.fLoc.$error" :error-message="e$(v$.fLoc.$errors)"/>
        </div>
      </div>
      <div class="row col-12">
        <div class="col-12">
          <q-icon color="red" name="fas fa-asterisk" size="10px" />
          <span>目的栈板(箱号)</span>
          <easy-input v-model="$d.tLpn" @focus="fx.ui.select" ref="tLpn"
            :error="v$.tLpn.$error" :error-message="e$(v$.tLpn.$errors)"/>
        </div>
      </div>
      <div class="row col-12">
        <div class="col-12">
          <q-icon color="red" name="fas fa-asterisk" size="10px" />
          <span>目的储位</span>
          <easy-input v-model="$d.tLoc" @focus="fx.ui.select" ref="tLoc"
            @keyup.enter="checkTLoc" :loading="checkLoading"
            :error="v$.tLoc.$error" :error-message="e$(v$.tLoc.$errors)"/>
        </div>
      </div>
      <div class="row col-12">
        <div class="col-12">
          <q-btn class="full-width" color="primary" icon-right="fas fa-sign-in-alt" label="确定移库" @click="doPutaway"
            :loading="receiveInfoLoadingState" :disable="!checkState" />
        </div>
      </div>
    </div>
  </q-page>
</template>
<script setup lang="ts">
import { reactive, ref, nextTick, computed } from 'vue'
import { WmWhLite } from '@njt/wms/defs/basic/wh'
import useVuelidate from '@vuelidate/core'
import _ from 'lodash'
import { playErrorSound, playSuccessSound } from '@njt/wms/helper/audio'

// 错误提示
let serverErrorMessage = ref('')

const $d = reactive({
  whId: null as number | null,
  fLpn: null as string | null,
  tLpn: null as string | null,
  tLoc: null as string | null,
  fLoc: null as string | null,
  // 仓库下拉
  whDropdownList: [] as WmWhLite[],
  locDropdownList: [] as Record<string, any>[],
})

let zoneId = computed(() => {
  let loc = _.find($d.locDropdownList, (o) => {
    return o.loc === $d.fLoc
  })
  if (loc) {
    return loc.zoneId
  } else {
    return null
  }
})

let getLocsLoadingState = ref(false)
const fLpnEnter = () => {
  serverErrorMessage.value = ''
  $d.fLoc = null
  if ($d.whId && $d.fLpn) {
    let params = {
      whId: $d.whId,
      fLpn: $d.fLpn,
    }
    getLocsLoadingState.value = true
    $f.axios
      .get<Record<string, any>[]>('/wms/inv/inventory/get-locs-by-lpn-for-whole-lpn-move-by-pda', {params: params})
      .then((resp) => {
        $d.locDropdownList = resp.data
        if ($d.locDropdownList.length === 1) {
          $d.fLoc = $d.locDropdownList[0].loc
        }
        $d.tLpn = $d.fLpn
      })
      .catch((err) => {
        $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
      })
      .finally(() => {
        getLocsLoadingState.value = false
        void nextTick(() => {
          tLoc.value?.focus()
        })
      })
  }
}

const validators = $f.validators
const rules = {
  whId: {
    required: validators.required
  },
  fLpn: {
    required: validators.required
  },
  fLoc: {
    required: validators.required
  },
  tLoc: {
    required: validators.required
  },
  tLpn: {
    required: validators.required
  }
}
const valResultForm = reactive({
  tLoc: ''
})

const v$ = useVuelidate(rules, computed(() => $d), {$autoDirty: true, $externalResults: valResultForm, $scope: false})

let checkState = ref(false)
let checkLoading = ref(false)
const checkTLoc = () => {
  serverErrorMessage.value = ''
  if ($d.tLoc) {
    let params = {
      whId: $d.whId,
      loc: $d.tLoc,
      zoneId: zoneId.value
    }
    $f.axios.get('/wms/basic/loc/check-if-loc-valid', {params})
      .then((resp) => {
        checkState.value = resp.data
        if (!resp.data) {
          playErrorSound()
          valResultForm.tLoc = '目标储位无效'
        }
      })
      .catch((err) => {
        playErrorSound()
        valResultForm.tLoc = $f.getAxiosErrMsg(err)
      })
      .finally(() => {
        checkLoading.value = false
      })
  }
}

let receiveInfoLoadingState = ref(false)
const doPutaway = () => {
  serverErrorMessage.value = ''
  void v$.value
    .$validate()
    .then((valRes) => {
      if (valRes) {
        let params = {
          whId: $d.whId,
          fLpn: $d.fLpn,
          fLoc: $d.fLoc,
          tLoc: $d.tLoc,
          tLpn: $d.tLpn
        }
        receiveInfoLoadingState.value = true
        $f.axios
          .post('/wms/inv/inventory/whole-lpn-move-by-pda', params)
          .then(() => {
            $d.fLpn = null
            $d.fLoc = null
            $d.tLoc = null
            $d.tLpn = null
            $d.locDropdownList = []
            v$.value.$reset()
            fLpn.value?.focus()
            $f.ui.showNotifySucceeded('整栈板移库成功')
            playSuccessSound()
            checkState.value = false
          })
          .catch((err) => {
            playErrorSound()
            serverErrorMessage.value = $f.getAxiosErrMsg(err)
          })
          .finally(() => {
            receiveInfoLoadingState.value = false
          })
      }
    })
}

// 仓库下拉
void $f.lst.getWmWhSimpleList()
  .then((resp) => {
    $d.whDropdownList = resp
    if (resp.length === 1) {
      $d.whId = resp[0].whId
    }
  })

const fLpn = ref<HTMLElement>()
const tLpn = ref<HTMLElement>()
const tLoc = ref<HTMLElement>()
const e$ = $f.getFieldErrStr
const fx = $f
</script>
